<template>
	<div class="page_user user_password" id="user_password">
		<div class="warp">
			<div class="container">
				<div class="row justify-content-between">
					<!-- 左侧边栏
					<div class="col-12 col-md-3">
						<div class="card_menu">

							<list_menu_user :list_info="list_info"></list_menu_user>
						</div>
					</div>
					-->
					<div class="col-12 col-md-9">
						<div class="card_password pl-2">
							<div>密码修改</div>
							<!-- 密码修改 -->
							<b-form class="card_pass_form">
								<b-form-group id="input-group-2" label="输入原始密码:" label-for="input-2"
									:state="validation_o_password" invalid-feedback="密码长度为在5-16个字符"
									valid-feedback="校验通过">
									<b-form-input id="input-2" v-model="form.o_password" type="password"
										placeholder="原始密码" trim></b-form-input>
								</b-form-group>
								<b-form-group id="input-group-2" label="设置新密码:" label-for="input-2"
									:state="validation_password" invalid-feedback="密码长度为在5-16个字符" valid-feedback="校验通过">
									<b-form-input id="input-2" v-model="form.password" type="password"
										placeholder="设置新密码" trim></b-form-input>
								</b-form-group>
								<b-form-group id="input-group-2" label="确认密码:" label-for="input-2"
									:state="validation_confirm_password" invalid-feedback="密码不一致" valid-feedback="">
									<b-form-input id="input-2" v-model="confirm_password" type="password"
										placeholder="确认密码" trim></b-form-input>
								</b-form-group>
							</b-form>
							<div class="password_confim">
								<div class="btn_item" @click="change_password()"><span>确认修改</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mixin from "@/mixins/page.js";
	// import list_menu_user from "@/components/diy/list_menu_user.vue";

	export default {
		mixins: [mixin],

		data() {
			return {
				form: {
					o_password: "",
					password: "",
				},

				confirm_password: "",

				list_info: [{
						title: "个人资料",
						url: "/user/info",
						icon: "house-fill",
						selected: false,
					},
					{
						title: "密码修改",
						url: "/user/password",
						icon: "person-fill",
						selected: true,
					},

					{
						title: "收藏",
						url: "/user/collect",
						icon: "heart-fill",
						selected: false,
					},

				],
			};
		},
		computed: {
			/**
			 * 验证原始密码
			 */
			validation_o_password() {
				var length = this.form.o_password.length;
				if (!length) {
					return null;
				}
				return length > 4 && length < 17;
			},
			/**
			 * 验证密码
			 */
			validation_password() {
				var length = this.form.password.length;
				if (!length) {
					return null;
				}
				return length > 4 && length < 17;
			},
			/**
			 * 再次验证密码
			 */
			validation_confirm_password() {
				return this.confirm_password === this.form.password;
			},
		},
		methods: {
			submit_check() {
				if(!this.form.password){
					return "密码不能为空!";
				}
				if(this.form.password.length > 16 || this.form.password.length < 5){
					return "密码长度应为5到16个字符之间！";
				}
				if (this.form.password !== this.confirm_password) {
					return "密码和确认密码不一致！"
				}
				return null;
			},
			/**
			 * 修改密码
			 */
			change_password() {
				let msg = this.submit_check();
				if (msg){
					this.$toast(msg,"error");
					return
				}
				var form = Object.assign({},this.form);

				if(this.form.password === this.confirm_password && this.form.o_password){
					this.$post("~/api/user/change_password?", form, (res) => {
						if (res.result) {
							//弹出更改成功，3秒后调到主页，退出账户
							this.$store.commit("sign_out");
							this.$router.push("/account/login")
						} else if (res.error) {
							console.log(res.error);
							this.$toast(res.error.message,"error");
						}
					});
				}
			},
		},
		components: {
			// list_menu_user,
		},
		mounted() {
			// console.log(this.user);
		},
	};
</script>

<style scoped>
	.container {
		min-height: 800px;
	}

	.btn_item {
		cursor: pointer;
		width: 100%;
		background-color: var(--color_primary);
		color: #fff;
		text-align: center;
		height: 48px;
		line-height: 48px;
	}

	.card_password {
		padding: 10px;
		width: 500px;
		margin: auto;
	}
</style>
